<style>
	@import "../../../static/z39pc/css/app.6689eaa302.css";
	@import "../../../static/z39pc/css/app.bb9deb9e54.css";
	@import "../../../static/z39pc/css/animate.min.css";
	@import "../../../static/z39pc/css/mycss/taskDetail.css";
	@import "../../../static/z39pc/css/mycss/task.css";
</style>
<template>
	<div class="task-main-container">
	<div id="mainBody" class="chrome webkit win modal-open" style="overflow-x: hidden;">
		<div id="nTalk_post_hiddenElement" style="left: -10px; top: -10px; visibility: hidden; display: none; width: 1px; height: 1px;"></div>
		
		<header-nav></header-nav>
		
		<div id="mainContent" style="background: none;">
			<!--<template>-->
			<div class="kanban-view">
				<div class="container-left-content active">
					<div class="show-box">
						<div class="icon-right el-icon-d-arrow-right">

						</div>
					</div>
					<div class="storageBox animated RSQ_fadeInLeft" id="storageBox">
						<header style="line-height: 64px;font-size: 14px;">
							<!--<template>
								<el-tabs v-model="boxTab" type="card">
									<el-tab-pane label="任务箱" name="box"></el-tab-pane>
									<el-tab-pane label="任务清单" name="taskList"></el-tab-pane>
								</el-tabs>
							</template>-->
							任务箱（总数：{{nonesList.length}}）
							<div class="inboxDropDown dropDown" style="border:0">
								<i class="dropdown-toggle el-icon-d-arrow-left hide-box" data-toggle="dropdown" aria-expanded="false"></i>
							</div>

						</header>
						<div id="left-box-container1" v-show="boxTab=='box'">
							<div id="buttonDiv">
								<div id="storageAddInputLi" style="display: block;"  @keyup.ctrl.enter="addTask">
									<!--<input id="storageAddInput" class="type-caption-white" v-model="addTaskTitle" placeholder="任务标题"></input>-->
									
									<textarea id="storageAddTextarea" name="" rows="3" cols="" v-model="addTaskTitle" v-bind:placeholder="addTaskTitlePlaceholder"></textarea>
								</div>
								<el-button type="primary" :loading="addBtnLoading" @click="addTask">添加</el-button>
							</div>
							<div id="storageUlDiv">
								<ul class="ui-sortable unsort">
									<draggable class="dragArea" :list="nonesList"  tagKey="none" :options="{group:'task'}" @remove="dragRemove" :move="dragMove" @add="dragAddNones">

										<template v-for="(item,index) in nonesList">
											<li class="kanban-Item-container task-11 animated tooltipstered" :taskId="item.id">

												<div class="left">
													<div class="checkboxContainer"><span class="diyCheckbox" style="cursor: pointer;"><i class="icon-check_box_outline_blank blank"></i><i class="icon-check check"></i><div class="checkTail"></div></span></div>
												</div>
												<div class="right">
													<div class="portrait-container">
														<!--<img class="portrait" src="../images/_large_avatar155568.png" draggable="false">
														<div class="time">07-11</div>-->
													</div>
													<div class="row1"><span v-bind:title="item.title+'\n'+item.desc" class="kanban-item-title">{{(index+1)+'.'+item.title}}</span>
														<!--<div class="receive-btn" style="display: none;">领取</div>-->
													</div>
													<div class="dateNode node"></div>
												</div>
											</li>
										</template>

									</draggable>
								</ul>
							</div>
						</div>
						<div id="left-box-container2" v-show="boxTab=='Tasklist'">
							<ul class="ui-sortable unsort" style="height: 100%;">
							</ul>
						</div>
						<!--<div class="total-account">
							总数：{{nonesList.length}}
						</div>-->
					</div>

				</div>
				<div class="container-right">
				</div>
			</div>
		</div>
		<!--</template>-->
	</div>

	</div>
</div>
</template>

<script>
	import draggable from 'vuedraggable'
	import _ from "underscore";
	import moment from "moment";
	import projectDialog from '../../components/task/projectDialog.vue'
	import headerNav from '../../components/all/header.vue'
	import api from '../../api';
	import { taskAndTag } from "../../common/mixin";
	import { mixinPc } from "../../common/mixinPc";
	import { bus } from "../../common/bus";
	
	export default {
		data() {			
			return {
				boxTab: 'box',
				nonesList: [], //收纳箱列表,filterTaskState:'',
				filterOptions:[{
					value:'0',
					label:'全部'
				},{
					value:'1',
					label:'未完成'
				},{
					value:'2',
					label:'已完成'
				},],
				boxTab: 'box',
				dateMonth: new Date(),
				memberActive: false,
				boxList: [],
				projectSwiper:'',
				projectList: [],
				memberList: [],
				todayList: [],
				todayTags: [],
				taskType: 'today',
				fullscreenLoading: true,
				addTaskTitle: '',
				addTaskTitlePlaceholder:'任务标题\n任务描述(回车换行后的内容自动添加到描述)快速添加快捷键Ctrl+Enter',
				addBtnLoading: false,
				dragItemData: '',
				showMonth: '',
				showYear: '',
				showWeek: new Date(),
				pickerOptions2: {
					firstDayOfWeek: 1
				},
				format: function(value, name) {
					return `${value[0]}:${value[1]}`
				},
				showTimeNeed: false,
				showPopupPicker: false,
				showSummary: false,
				taskCurr: {
					title: ""
				},
				taskDoing: null,
				sortStr: "",
				todayArr: [],
				todaySort: [],
				todaySortArr: [],
				visibility: false,
				daySelect: "",
				stateAdd: false,
				taskTitle: "",
				taskDesc: "",
				nonesList: [], //收纳箱列表,
				projectId: '', //选中的项目
			}
		},
		components: {
			draggable,
			'project-dialog': projectDialog,
			'header-nav':headerNav
		},
		methods:{

			//收纳箱添加任务
			addTask: function() {
				if(!this.addTaskTitle.split('\n')[0]) {
					this.$message({
						message: '请输入任务标题',
						type: 'warning'
					});
					return;
				}
		        var importReg = /```tlog\n([\s\S]*)```/g ;
		        var matchObj = this.addTaskTitle.match(importReg) ;
		        
		        var str ;
		        var prolist ;
		        if(matchObj!=null){  //str.length >0
		          str = this.addTaskTitle.replace(importReg,"$1") ;
		          prolist = parseTlog(str) ;  //parseTlog.js
		          if(prolist.length == 0 || prolist[0].tasks.length==0) return this.$message({message: '缺少导入数据',type: 'warning'});
				  this.addBtnLoading = true;
		          this.tasksAdd({tasks:prolist[0].tasks}).then(data => { 
						this.addTaskTitle=''
						this.addBtnLoading = false;
					},data => { 
						this.addBtnLoading = false;
					});
		          console.log(prolist,str); 
		          return ;
		        }
				this.addBtnLoading = true;
				var params = {
					uid: 1,
					title: this.addTaskTitle.split('\n')[0],
					desc:this.addTaskTitle.split('\n')[1]||''
				}
				this.taskAdd(params).then(data => { 
					this.addTaskTitle=''
					this.addBtnLoading = false;
				},data => { 
					this.addBtnLoading = false;
				});
			},
			dragAddNones: function(event) {
				var routeName = this.$route.name;
				var taskId = $(event.clone).attr("taskId");
				var taskItem = this.taskDic[taskId];
				var tagId1 = this.tagDic[taskId + '_due'] ? this.tagDic[taskId + '_due'].id : '';
				if(tagId1) {
					this.tagDel({
						id: tagId1,
						key: 'due'
					}, true, taskItem);
				}
				if(routeName == '项目任务') {
					var tagId2 = this.tagDic[taskId + '_' + $(event.from).attr('tagKey')].id;
					this.tagDel({
						id: tagId2,
						key: $(event.from).attr('tagKey')
					}, true, taskItem);
					this.taskSet({
						pid: '',
						id: taskItem.id,
						state: ''
					}, taskItem); //添加pid
				}

			},
			dragRemove: function(event) {

				//				return false;
			},
			dragMove: function(event) {
				var routeName = this.$route.name;
				if(routeName == '项目任务' && !this.projectId) {
					return false;
				}
				//			this.dragItemData = event.relatedContext.element;
				//			console.log(this.nones.length)
			},
		}
	}
</script>